import { URL, fileURLToPath } from 'node:url'
import process from 'node:process'
// import path, { resolve } from 'node:path' // 主要用于alias文件路径别名
import type {
  ConfigEnv,
  UserConfig,
} from 'vite'
import {
  defineConfig,
  loadEnv,
} from 'vite'
// import eslintPlugin from 'vite-plugin-eslint';
import vue from '@vitejs/plugin-vue'
import vusJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
// svg精灵图
// 打包分析 => 打包之后会在项目根目录生成 stats.html 文件
// import { visualizer } from 'rollup-plugin-visualizer'
// gzip 是一种使用非常普遍的压缩格式。使用 gzip 压缩可以大幅减小代码体积，提升网络性能。
// import viteCompression from 'vite-plugin-compression';
// 图片压缩
import viteImagemin from 'vite-plugin-imagemin'

// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import UnoCSS from 'unocss/vite'
// 组件自动加载
import Components from 'unplugin-vue-components/vite'
// 自动导入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import ElementPlus from 'unplugin-element-plus/vite'

import legacy from '@vitejs/plugin-legacy'

import VitePluginVueDevtools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig(
  ({ mode }: ConfigEnv): UserConfig => {
    const env = loadEnv(mode, process.cwd())
    const {
      VITE_PORT,
      VITE_BASE_URL,
      VITE_HOST,
      VITE_ENV,
      VITE_BASE_PUBLIC_PATH,
      VITE_BUILD_LEGACY,
      VITE_USE_IMG_COMPRESS,
    } = env
    const isProduction = VITE_ENV === 'production'
    const isLegacy = VITE_BUILD_LEGACY === 'true'
    const isImageCompress = VITE_USE_IMG_COMPRESS === 'true'
    const baseUrls: string[] = VITE_BASE_URL.split(',')
    const plugins = [
      vue(),
      vusJsx(),
      VitePluginVueDevtools(),
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        dts: 'src/auto-import.d.ts',
        resolvers: [ElementPlusResolver()],
        // 自动导入方法所在的文件目录
        dirs: [
          'src/hooks',
          'src/store',
          'src/utils/modules',
          'src/api',
          'src/directive',
        ],
        eslintrc: {
          enabled: true, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
          filepath: './.eslintrc-auto-import.json', // 生成json文件,可以不配置该项，默认就是将生成在根目录
          globalsPropValue: true,
        },
      }),
      Components({
        dirs: ['src/components'], // 可存在多个
        dts: 'src/components.d.ts',
        resolvers: [ElementPlusResolver()],
      }),
      UnoCSS(),
      ElementPlus({
        defaultLocale: 'zh-cn',
      }),
      // visualizer({ open: true })
    ]
    if (isProduction) {
      if (isLegacy) {
        plugins.push(
          legacy({
            targets: ['defaults', 'ie >= 11', 'chrome >= 78'],
            additionalLegacyPolyfills: [
              'regenerator-runtime/runtime',
            ],
            renderLegacyChunks: true,
            polyfills: [
              'es.symbol',
              'es.promise',
              'es.promise.finally',
              'es/map',
              'es/set',
              'es.array.filter',
              'es.array.for-each',
              'es.array.flat-map',
              'es.object.define-properties',
              'es.object.define-property',
              'es.object.get-own-property-descriptor',
              'es.object.get-own-property-descriptors',
              'es.object.keys',
              'es.object.to-string',
              'web.dom-collections.for-each',
              'esnext.global-this',
              'esnext.string.match-all',
            ],
          }),
        )
      }
      if (isImageCompress) {
        plugins.push(
          viteImagemin({
            gifsicle: {
              optimizationLevel: 7,
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            mozjpeg: {
              quality: 20,
            },
            pngquant: {
              quality: [0.8, 0.9],
              speed: 4,
            },
            svgo: {
              plugins: [
                {
                  name: 'removeViewBox',
                },
                {
                  name: 'removeEmptyAttrs',
                  active: false,
                },
              ],
            },
          }),
        )
      }
    }
    return {
      base: VITE_BASE_PUBLIC_PATH, // 设置打包路径
      assetsInclude: ['**/*.mov'],
      resolve: {
        // 配置文件别名 vite1.0是/@/  2.0改为/@ 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件 tsconfig 中的paths也需要配置
        alias: {
          // '@': resolve(__dirname, 'src'),
          '@': fileURLToPath(new URL('./src', import.meta.url)),
          // vue: 'vue/dist/vue.esm-bundler.js' // 项目中可使用template创建组件
        },
        extensions: [
          '.js',
          '.json',
          '.ts',
          '.tsx',
          '.vue',
          '.mjs',
          '.jsx',
          '.sass',
          '.scss',
        ], // 使用路径别名时想要省略的后缀名，可以自己 增减
      },
      // 自定义全局变量
      define: {
        'process.env': {},
      },
      plugins,
      css: {
        devSourcemap: true,
        preprocessorOptions: {
          scss: {
            // 定义全局的scss变量
            // 给导入的路径最后加上 ;
            additionalData: `@import '@/style/global.scss';`,
          },
        },
      },
      build: {
        minify: 'terser',
        target: [
          'es2015',
          'edge88',
          'firefox78',
          'chrome78',
          'safari14',
        ],
        cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
        rollupOptions: {
          output: {
            format: 'es',
            chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
            entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
            assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
          },
        },

        terserOptions: {
          compress: {
            keep_infinity: true,
            drop_console: (['log'] as any), // 打包时删除console
            drop_debugger: true, // 打包时删除 debugger
          },
          output: {
            // 去掉注释内容
            comments: true,
          },
        },
      },

      // 本地运行配置，及反向代理配置
      server: {
        // vue3 vite配置热更新不用手动刷新
        hmr: true,
        host: VITE_HOST,
        // port: 3000, // 设置服务启动端口号
        port: Number(VITE_PORT),
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开
        proxy: {
          // 反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
          // 管理系统
          '/api': {
            target: baseUrls[0],
            // target: 'http://192.168.3.55:8095', //代理接口
            changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器
            rewrite: path => path.replace(/^\/api/, ''),
          },
          // 能耗系统
          '/energy': {
            target: baseUrls[1], // 代理接口
            changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器
            rewrite: path => path.replace(/^\/energy/, ''),
          },
          '/compute': {
            target: baseUrls[2],
            changeOrigin: true,
            rewrite: path => path.replace(/^\/compute/, ''),
          },
        },
      },
    }
  },
)
